<template>
  <div class="echart" id="windPowerChart"></div>
</template>
<script>
import echart from 'echarts'
import { windPlantCurve } from '@/api/scada'

export default {
    name: "echart",
    props: {},
    data() {
        return {
            option: {
                textStyle: {
                    fontWeight: 400,
                    fontSize: 14,
                    color: '#666'
                },
                tooltip: {
                    trigger: 'axis'
                },

                grid: {
                    left: 20,
                    right: 20,
                    bottom: 20,
                    top: 50,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        align:'left',
                        lineStyle: {
                            color: "#E8E8E8",
                            width: 1
                        }
                    }

                },

                yAxis: {
                    name: '单位(kW)',
                    nameTextStyle: {
                        fontWeight: 400,
                        fontSize: 14,
                        color: '#666'
                    },
                    type: 'value',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#E8E8E8"
                        }
                    },

                },
                series: [{
                    name: '发电功率(kW)',
                    showSymbol: false,
                    data: [],
                    type: 'line',
                    itemStyle: {
                        color: "#90D66E"
                    },
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(144, 214, 110, 1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(144, 214, 110, 0.06)'
                                }],
                                global: false
                            }
                        }
                    },
                    smooth: false
                }]
            },
        };
    },
    computed: {},
    created() {
    },
    mounted() {
        let echartBox = document.querySelector('#windPowerChart')
        let myCahrt = echart.init(echartBox)
        windPlantCurve().then(res => {
            console.log(res)
            this.option.series[0].data = res.map(item => +item.p);
            this.option.xAxis.data = res.map(item => item.time);
            myCahrt.setOption(this.option, true);
        })
    },
    watch: {},
    methods: {},
    components: {}
};
</script>

<style scoped lang="scss">
  .echart {
    height: 260px;
  }
</style>
